<template>
  <div class="process">
    <div class="progress-info">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="time" />
        <el-table-column prop="plan_finsh_num" label="计划工作完成量" />
        <el-table-column prop="truth_finsh_num" label="实际工作完成量" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="editRow(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="next-step">
      <el-space :size="20">
        <el-button type="primary" @click="lastStep">上一步</el-button>
        <el-button type="primary" @click="nextStep">完成</el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
const emits = defineEmits(['nextStep'])

const tableData = ref([
  {
    time: '2022/1',
    plan_finsh_num: '20',
    truth_finsh_num: '10'
  },
  {
    time: '2022/2',
    plan_finsh_num: '15',
    truth_finsh_num: '5'
  }, {
    time: '2022/3',
    plan_finsh_num: '35',
    truth_finsh_num: '30'
  }, {
    time: '2022/4',
    plan_finsh_num: '28',
    truth_finsh_num: '22'
  }
])

const lastStep = () => {
  emits('lastStep', 1)
}
const nextStep = () => {
  emits('nextStep')
}
const editRow = (row) => {

}
</script>

<style lang="less" scoped>

.add {
  height: 50px;
  display: flex;
  padding-left: 20px;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
}

.next-step {
  background-color: #fff;
  padding: 20px;
  text-align: end;
  margin-top: 10px;
}

.progress-info {
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
  display: flex;

  .operate {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
